<template>
  <div class="authContainer">
    <div class="timeCont" v-if="showCont && !showTimeOut">
      <!-- <div class="bannerCont">
        <img class="bannerImg" src="/img/banner/3.png" />
      </div> -->
      <div class="formCont">
        <div class="formTitle">
          <div>账号绑定</div>
          <div class="titleEdit" @click="isRead = !isRead">
            {{ isRead ? "编辑" : "取消" }}
          </div>
        </div>
        <div class="formInput">
          <div class="inputName">手机号</div>
          <input
            v-model="bindInfo.mobile"
            type="tel"
            maxlength="11"
            :disabled="isRead"
            placeholder="请输入绑定手机号"
          />
          <div
            v-if="!isRead"
            :class="checkPhone() && !isGetting ? 'getCode' : 'disgetCode'"
            @click="getCode"
          >
            {{ codeText }}
          </div>
        </div>
        <div class="formInput" v-if="!isRead">
          <div class="inputName">验证码</div>
          <input
            v-model="bindInfo.code"
            type="digit"
            maxlength="4"
            placeholder="请输入验证码"
          />
        </div>
        <div class="formInput">
          <div class="inputName">微信号</div>
          <input
            v-model="bindInfo.wechat"
            type="text"
            maxlength="20"
            :disabled="isRead"
            placeholder="请输入绑定的微信号"
          />
        </div>
        <div class="formInput">
          <div class="inputName">QQ</div>
          <input
            v-model="bindInfo.qq"
            type="text"
            maxlength="11"
            :disabled="isRead"
            placeholder="请输入绑定的qq号"
          />
        </div>
        <div class="formInput">
          <div class="inputName">邮箱</div>
          <input
            v-model="bindInfo.email"
            type="text"
            :disabled="isRead"
            maxlength="18"
            placeholder="请输入绑定的邮箱"
          />
        </div>
        <div class="saveBtn" v-if="!isRead" @click="saveFn">保存信息</div>
      </div>
    </div>
    <subLoad v-if="showSub"></subLoad>
    <load v-if="!showCont"></load>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
  </div>
</template>
<script>
import { showSuccessToast, showFailToast, showToast } from "vant";
import subLoad from "@/components/public/subLoad.vue";
import load from "@/components/public/load.vue";
import getTimeOut from "@/components/public/getTimeOut.vue";
import {
  Sendsms,
  account_binding_show,
  account_binding_save,
} from "@/http/api";
export default {
  components: { subLoad, load, getTimeOut },
  name: "",
  data() {
    return {
      showTimeOut: false,
      showCont: false,
      showSub: false,
      isRead: false,
      bindInfo: {
        mobile: "",
        wechat: "",
        email: "",
        qq: "",
        code: "",
      },
      // 获取验证码
      codeText: "获取验证码",
      isGetting: false, //是否正处于获取中
    };
  },
  props: {},
  setup() {},
  methods: {
    checkPhone() {
      let reg = /^1[3456789]{1}\d{9}$/;
      if (reg.test(this.bindInfo.mobile)) {
        return true;
      } else {
        return false;
      }
    },
    getCode() {
      let result = this.checkPhone();
      if (!this.isGetting && result) {
        this.isGetting = true;
        let timer = null;
        let num = 60;
        this.getSendsms(this.bindInfo.mobile);
        timer = setInterval(() => {
          if (num > 0) {
            num--;
            this.codeText = num + "s后重试";
          } else {
            this.codeText = "重新获取";
            this.isGetting = false;
            clearInterval(timer);
          }
        }, 1000);
      }
    },
    getSendsms(mobile) {
      let data = {
        mobile: mobile,
      };
      Sendsms(data)
        .then((res) => {
          if (res.data.code == 1) {
            showSuccessToast("发送成功");
          } else {
            showFailToast("发送失败");
          }
        })
        .catch((err) => {
          showFailToast("网络超时");
        });
    },
    saveFn() {
      let data = this.bindInfo;
      if (!data.mobile) {
        showToast("手机号不正确");
        return false;
      } else if (data.code.length != 4) {
        showToast("验证码不正确");
        return false;
      } else if (!data.wechat) {
        showToast("请输入微信号");
        return false;
      } else if (data.qq.length < 6) {
        showToast("QQ号不正确");
        return false;
      }
      this.showSub = true;
      account_binding_save(data).then((res) => {
        if (res.data.code == 1) {
          showSuccessToast("绑定成功");
        } else {
          showToast(res.data.msg);
        }
        this.showSub = false;
      });
    },
    getData() {
      account_binding_show()
        .then((res) => {
          if (res.data.code == 1) {
            if (res.data.data && res.data.data.mobile) {
              this.isRead = true;
              this.bindInfo = res.data.data;
            }
          } else {
            showToast(res.data.msg);
          }
          this.showCont = true;
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
  },
  mounted() {},
  created() {
    this.getData();
    // this.showTimeOut = true;
    // this.showCont = true;
  },
};
</script>
<style scoped lang="less">
.authContainer {
  background-color: #e7eeff;
  min-height: 100vh;
  .timeCont {
    padding-bottom: 2rem;
    box-sizing: border-box;
    padding-top: 1.25rem;
  }
  .bannerCont {
    width: 100%;
    color: #fff;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    .bannerImg {
      width: 100%;
    }
  }
  .formCont {
    background-color: #fff;
    width: 92%;
    margin: 0 auto;
    position: relative;
    top: 0rem;
    padding: 1rem 4%;
    border-radius: 0.75rem;
    box-sizing: border-box;
    .formTitle {
      font-size: 0.8rem;
      font-weight: bold;
      margin-bottom: 1rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .titleEdit {
        font-weight: normal;
        font-size: 0.7rem;
      }
    }
    .formInput {
      display: flex;
      padding: 0.75rem 1rem;
      box-sizing: border-box;
      align-items: center;
      width: 100%;
      background-color: #f6f7f9;
      margin-bottom: 1rem;
      border-radius: 1.5rem;
      .inputName {
        width: 3.2rem;
      }
      input {
        flex: 1;
        width: 3rem;
        border: none;
        background: none;
        outline: none;
      }
      .getCode {
        color: #86a9fb;
        font-size: 0.6rem;
      }
      .disgetCode {
        color: #ccc;
        font-size: 0.6rem;
      }
    }
    .saveBtn {
      width: 100%;
      padding: 0.75rem 0;
      text-align: center;
      background-image: linear-gradient(to right, #cbd8f7, #86a9fb);
      color: #fff;
      border-radius: 2rem;
    }
  }
}
</style>
